<!--<template>-->
<!--  <div class="collection-list">-->
<!--    <div class="header">-->
<!--      <span>共{{ productCollections.length }}个收藏项</span>-->
<!--    </div>-->
<!--    <el-table :data="productCollections" style="width: 100%">-->
<!--      <el-table-column prop="id" label="收藏ID" width="180"></el-table-column>-->
<!--      <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>-->
<!--      <el-table-column prop="productId" label="产品ID" width="180"></el-table-column>-->
<!--      <el-table-column prop="createTime" label="收藏时间" width="180"></el-table-column>-->
<!--    </el-table>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import axios from 'axios';-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      productCollections: []-->
<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    // 这里假设你的后端接口地址是 /collections，并且需要传递用户ID（假设用户ID为1，实际中需要根据用户登录情况获取）-->
<!--    axios.get('http://1.94.221.254:9999/leaders/api/collection/findCollectList/${userId}', {-->
<!--      params: {-->
<!--        userId: 1-->
<!--      }-->
<!--    })-->
<!--        .then(response => {-->
<!--          this.productCollections = response.data;-->
<!--        })-->
<!--        .catch(error => {-->
<!--          console.error('获取收藏列表失败', error);-->
<!--        });-->
<!--  }-->
<!--};-->
<!--</script>-->

<template>
  <div class="collection-list">
    <div class="header">
      <van-nav-bar
          title=""
          left-text=""
          left-arrow
          @click-left="onClickLeft()"
      />
    <div>我的收藏</div>
      <el-button type="text" @click="edit">编辑</el-button>
    </div>
    <span>共{{ products.length }}件商品</span><br><br>
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.img" alt="ProductImage" class="product-image">
      <div class="product-details">
        <p class="product-title">{{ product.name }}</p>
        <p class="product-description">{{ product.jieshao }}</p>
        <p class="product-prices">
          <span class="current-price">¥{{ product.price }}</span>
          <span class="original-price">¥{{ product.yuanjia }}</span>
        </p>
      </div>
    </div>
    <p v-if="products.length === 0" class="no-more">没有更多了</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
          {
            id: 1,
            img: 'https://hh666.oss-cn-beijing.aliyuncs.com/ffb5bb8fa0fffa31a5a9fb05a0beaffb.jpeg',
            name: '莫比乌斯环纯银手镯',
            jieshao: '足银打造999足银',
            price: 99.00,
            yuanjia: 364.00,
          },
          {
            id: 2,
            img: 'https://hh666.oss-cn-beijing.aliyuncs.com/fb68d17b42a5b1e897d19f1f9d354656.jpeg',
            name: '爱敬气垫BB霜爱敬旗舰店',
            jieshao: '会爆水珠的气垫！',
            price: 99.00,
            yuanjia: 228.00,
          },
      ],
    };
  },
  methods: {
    edit() {
      // 这里可以添加编辑功能的逻辑
      console.log('编辑按钮被点击');
    },
    findCollectList(){

      // 这里假设你的后端接口地址是 /collections，并且需要传递用户ID（假设用户ID为1，实际中需要根据用户登录情况获取）
       this.axios.get('http://1.94.221.254:9999/leaders/api/collection/findCollectList/${userId}', {
        params: {
          userId: 1
        }
      })
          .then(response => {
            this.productCollections = response.data;
          })
          .catch(error => {
            console.error('获取收藏列表失败', error);
          });
    },
    onClickLeft(){
      this.$router.push('/wode')
    }
  },
  created(){
    this.findCollectList();
  },
};
</script>

<style scoped>
.collection-list {
                width: 100%;
              }

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  height: 50px; /* 设置你想要的高度，这里以50px为例 */
}

.product-item {
             display: flex;
             margin-bottom: 10px;
           }

.product-image {
             width: 100px;
             height: 100px;
             margin-right: 10px;
           }

.product-details {
             flex: 1;
           }

.product-prices {
             display: flex;
             margin-top: 5px;
           }

.current-price {
             color: red;
             margin-right: 10px;
           }

.no-more {
        text-align: center;
      }
</style>